<template>
  <div class="app-container">
    <h1>管理员教师列表管理界面</h1>
    <el-button style="margin-bottom:20px" @click="addTeacher()"> 添加教师 </el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="学院" align="center">
        <template slot-scope="scope">
          {{ scope.row.college }}
        </template>
      </el-table-column>
      <el-table-column label="职称" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.password }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="changeTeacher(scope.$index)"> 修改信息 </el-button>
          <el-button @click="deleteTeacher(scope.row.id)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="changeShow">
      <el-form :model="teacherDetail">
        <el-form-item label="ID">
          <el-input v-model="teacherDetail.t_id" :disabled="true" />
        </el-form-item>
        <el-form-item label="教师名称">
          <el-input v-model="teacherDetail.new_name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="teacherDetail.new_password" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="teacherDetail.new_college" />
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="teacherDetail.new_title" />
        </el-form-item>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleChange">提交</el-button>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="deleteShow">
      <el-form :model="deleteID">
        <div align="center" style="margin-bottom:30px">确定删除？</div>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleDelete">提交</el-button>
        <el-button style="width:100%;margin-bottom:30px;" @click="close">取消</el-button>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="addShow">
      <el-form :model="newTeacher">
        <el-form-item label="教师名称">
          <el-input v-model="newTeacher.t_name" placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newTeacher.t_password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="newTeacher.t_college" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="newTeacher.t_title" placeholder="请输入职称" />
        </el-form-item>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleAdd">提交</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { adminGetTeachers } from '@/api/admin'
import { adminChangeTeacher } from '@/api/admin'
import { adminDeleteTeacher } from '@/api/admin'
import { adminAddTeacher } from '@/api/admin'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      newTeacher: {
        t_name: '',
        t_password: '',
        t_college: '',
        t_title: ''
      },
      teacherDetail: {
        t_id: '',
        new_name: '',
        new_password: '',
        new_college: '',
        new_title: ''
      },
      deleteID: {
        t_id: ''
      },
      addShow: false,
      changeShow: false,
      deleteShow: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      adminGetTeachers().then(response => {
        this.list = response.teachers
        this.listLoading = false
      })
    },
    addTeacher() {
      this.addShow = true
    },
    handleAdd() {
      console.log(this.newTeacher)
      adminAddTeacher(this.newTeacher).then(response => {
        if (response.code == 200) {
          this.fetchData()
          this.newTeacher.t_name = ''
          this.newTeacher.t_password = ''
          this.newTeacher.t_college = ''
          this.newTeacher.t_title = ''
        } else {
          console.log('出现错误')
        }
      })
      this.addShow = false
    },
    changeTeacher(id) {
      this.teacherDetail.t_id = this.list[id].id
      this.teacherDetail.new_name = this.list[id].name
      this.teacherDetail.new_password = this.list[id].password
      this.teacherDetail.new_college = this.list[id].college
      this.teacherDetail.new_title = this.list[id].title
      this.changeShow = true
    },
    handleChange() {
      adminChangeTeacher(this.teacherDetail).then(response => {
        if (response.code == 200) {
          this.fetchData()
        } else {
          console.log('出现错误')
        }
      })
      this.changeShow = false
    },
    deleteTeacher(id) {
      this.deleteID.t_id = id
      this.deleteShow = true
    },
    handleDelete() {
      adminDeleteTeacher(this.deleteID).then(response => {
        if (response.code == 200) {
          this.fetchData()
        } else {
          console.log('出现错误')
        }
      })
      this.deleteShow = false
    },
    close() {
      this.deleteID.t_id = ''
      this.deleteShow = false
    }
  }
}
</script>
